<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.jpg" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="消息通知">
				<view slot="center" class="navTitle">
					消息通知 
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="tbs">
							<view class="i" :class="type==0?'cur':''" @tap="toggleType(0)">
								<view class="it">
									未读 
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
							<view class="i" :class="type==1?'cur':''" @tap="toggleType(1)">
								<view class="it">
									已读
								</view>
								<view class="ic">
									<image src="@/static/images/icon-halfcircle.svg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30" @scrolltolower="loadMore">
				<view class="pd30">
					<view class="messageList" v-if="list&&list.length>0">
						<view class="item" v-for="msg in list" @tap="viewDetail(msg.id)">
							<view class="tit">
								<view class="tl">
									<view class="t">
										{{msg.title}}
									</view>
									<view class="dot" v-if="!msg.isRead"></view>
								</view>
								<view class="tr">
									{{msg.date|dateFormate('YYYY.MM.DD')}}
								</view>
							</view>
							<view class="p" v-html="msg.desc"></view>
							<view class="navigator">
								<text>查看详情</text>
								<view class="ico">
									<image src="@/static/images/icon-more.svg" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore fontSize="24rpx" :status="list.length<total?(isLoading?'loading':'loadmore'):'nomore'" />
				</view>
			</scroll-view>
		</view>
		<u-action-sheet @close="showActionSheet=false" :closeOnClickOverlay="true" round="30rpx" :actions="actions[actionSheetIndex]" @select="handleAction" :show="showActionSheet"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldScrollTop:0,
				scrollTop:0,
				type:0,
				list:[],
				pageSize:6,
				total:1,
				pageIndex:1,
				isLoading:false
			}
		},
		methods: {
			updateScroll(e){
				this.oldScrollTop=e.detail.scrollTop;
			},
			viewDetail(id){
				uni.navigateTo({
					url:'/subpage/message/detail?id='+id
				})
			},
			toggleType(type){
				var that=this;
				that.type=type;
				that.list=[];
				that.pageIndex=1;
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			getList(){
				var that=this;
				if(that.isLoading){return;};
				that.isLoading=true;
				let timer=setTimeout(function(){
					//请求开始
					var res={
						list:[
							{
								id:101,
								title:'系统任务通知',
								endDate:'2024.12.21',
								isRead:false,
								desc:'您好！您有新的系统任务，请及时查看并处理！'
							},
							{
								id:101,
								title:'预约通知',
								endDate:'2024.12.21',
								isRead:false,
								desc:'您好！您有新的心理辅导咨询预约，请及时查看确认！'
							},
							{
								id:101,
								title:'取消预约',
								endDate:'2024.12.21',
								isRead:false,
								desc:'您好！平台发布新的测评任务，请及时查看并完成测评！'
							},
							{
								id:101,
								title:'测评通知',
								endDate:'2024.12.21',
								isRead:false,
								desc:'您好！平台发布新的测评任务，请及时查看并完成测评！'
							},
							{
								id:101,
								title:'预约通知',
								endDate:'2024.12.21',
								isRead:false,
								desc:'您好！您有新的心理辅导咨询预约，请及时查看确认！'
							},
							{
								id:101,
								title:'取消预约',
								endDate:'2024.12.21',
								isRead:false,
								desc:'您好！平台发布新的测评任务，请及时查看并完成测评！'
							},
							{
								id:101,
								title:'测评通知',
								endDate:'2024.12.21',
								isRead:false,
								desc:'您好！平台发布新的测评任务，请及时查看并完成测评！'
							},
						],
						total:20
					};
					var arr=that.list.concat(res.list);
					that.list=arr;
					that.total=res.total;
					that.isLoading=false;
					//end
					clearTimeout(timer);
				},2000);
			},
			loadMore(){
				var that=this;
				if(that.list.length<that.total&&!that.isLoading){
					that.pageIndex++;
					that.getList();
				}
			}
		},
		computed:{
			
		},
		mounted(){
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.messageList{
		.item{
			padding: 40rpx 30rpx 0;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 30rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
				.tl{
					flex: 1 1 auto;
					padding-right: 30rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
					.t{
						flex: 0 1 auto;
						overflow: hidden;
						font-size: 32rpx;
						color: #65554d;
					}
					.dot{
						flex: 0 0 auto;
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background: #fe9c29;
						margin-left: 20rpx;
					}
				}
				.tr{
					flex: 0 0 auto;
					font-size: 24rpx;
					color: #af9c91;
				}
			}
			.p{
				font-size: 28rpx;
				line-height: 40rpx;
				height: 80rpx;
				overflow: hidden;
				color: #897f7a;
			}
			.navigator{
				margin-top: 30rpx;
				border-top: 1rpx solid #f8f6f4 !important;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #7a6458;
				height: 90rpx !important;
				.ico{
					flex: 0 0 auto;
					image{
						display: block;
						width: 12rpx;
						height: 24rpx;
					}
				}
			}
		}
	}
</style>
